'use client'

import { Modal, Upload, message } from 'antd'
import { InboxOutlined } from '@ant-design/icons'

interface SceneImportExportProps {
  isOpen: boolean;
  onClose: () => void;
  onSuccess: () => void;
}

export default function SceneImportExport({ isOpen, onClose, onSuccess }: SceneImportExportProps) {
  const handleImport = async (file: File) => {
    try {
      const reader = new FileReader()
      reader.onload = async (e) => {
        try {
          const content = e.target?.result as string
          const scenes = JSON.parse(content)
          
          // 发送到后端导入
          const response = await fetch('/api/scenes/import', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({ scenes }),
          })

          if (!response.ok) {
            throw new Error('导入失败')
          }

          message.success('场景导入成功')
          onSuccess()
        } catch (error) {
          console.error('导入失败:', error)
          message.error('场景导入失败')
        }
      }
      reader.readAsText(file)
      return false // 阻止自动上传
    } catch (error) {
      console.error('读取文件失败:', error)
      message.error('读取文件失败')
      return false
    }
  }

  return (
    <Modal
      title="导入场景"
      open={isOpen}
      onCancel={onClose}
      footer={null}
    >
      <Upload.Dragger
        accept=".json"
        beforeUpload={handleImport}
        showUploadList={false}
      >
        <p className="ant-upload-drag-icon">
          <InboxOutlined />
        </p>
        <p className="ant-upload-text">点击或拖拽文件到此处</p>
        <p className="ant-upload-hint">
          支持导入 .json 格式的场景配置文件
        </p>
      </Upload.Dragger>
    </Modal>
  )
} 